<template>
	<view>
		<view class="con">
            <view class="box" @click="onClick" :style="{background:color}"></view>	
			<view >点击次数：{{num}}</view>
			<view >当前颜色值： {{color}}</view>
		</view>
		
		<view class="con" >
			<text>切换为加载状态：</text>
			<switch style="margin-bottom: 15px;" @change="onChange"/>
			<button type="primary" :loading="isLoading">普通按钮</button>
		</view>
        
	</view>
</template>

<script setup>
import {ref} from "vue";	

const num = ref(1);
const color = ref("#fc359a");

const isLoading = ref(false);

function onClick(){
	num.value++;
	color.value = "#" + String(Math.random()).substring(3,9);
	console.log( color.value  );
}

function onChange(e){
	isLoading.value = e.detail.value	
}

</script>

<style lang="scss" scoped>
.con{
    border: 1px solid rgb(172, 168, 168);
	margin: 35px;
    padding: 15px 35px;
    
	text-align: center;

	.box{
		width: 200px;
		height: 200px;
		background: orange;
		margin: 0 auto; 
	}
	
}
</style>
